<template>
  <el-container id="app" class="container" direction="vertical" >
    <transition name="el-fade-in-linear">
      <MessageBox></MessageBox>
    </transition>
    <el-header style="padding: 0;margin: 0;">
      <el-row >

        <el-col :span="24">

           <el-menu
             :default-active="activeIndex"
             class="el-menu-demo"
             mode="horizontal"
             @select="handleSelect"
              background-color="#3C3F41"
              text-color="#9E9F9F"
              active-text-color="#B15B2E"
              style="border: none; transition: all 0s;"
             >
             <div style="display: inline-block; float: left; width: 200px; height: 60px; line-height: 60px;text-align: center; border: none">
               <router-link to="/" >
                <el-image
                  style="width: 60px; height: 60px;"
                  src="/static/img/logo.png"
                  fit="contain"></el-image>
               </router-link>
             </div>
             <div style="display: inline-block; float: left; width: 300px; height: 60px; line-height: 60px;">
               <ShowTime></ShowTime>
             </div>
             <el-menu-item>
               <el-button @click="activeShowLogBoard" size="small" type="primary">
                 <span v-if="showLogBoard">
                   <span>隐藏日志</span>
                 </span>
                 <span v-if="!showLogBoard">
                   <span>显示日志</span>
                 </span>
               </el-button>
             </el-menu-item>
            </el-menu>
        </el-col>
      </el-row>
    </el-header>
    <el-container direction="horizontal ">
      <el-aside :width="asideWidth" style="transition: width 100ms;background-color: #3C3F41">
          <el-menu
            default-active="1"
            class="el-menu-vertical-deo tac"
            :collapse="isCollapsed"
            background-color="#3C3F41"
            text-color="#9E9F9F"
            active-text-color="#B15B2E"
            :default-active="activeIndex"
            style="border: none;overflow: hidden;width: auto;"
            @select="handleSelect">
            <el-menu-item @click="handleToggle()" ><i :class="[isCollapsed?'el-icon-caret-right rotate-arrow':'el-icon-caret-right rotate-arrow-active' ]" ></i></el-menu-item>
           <router-link to="/console/show_all" id="watch">
            <el-menu-item index="1">
              <div style="display: inline-block">

                <label for="watch"><i class="el-icon-s-management"></i></label>
                  <span v-if="!isCollapsed">观察中心</span>

              </div>
            </el-menu-item>
             </router-link>

            <router-link to="/feature" id="feature">
            <el-menu-item index="2">
              <div style="display: inline-block">

                  <label for="feature"><i class="el-icon-s-opportunity"></i></label>
                  <span v-if="!isCollapsed">功能测试</span>

              </div>
            </el-menu-item>
               </router-link>

            <router-link to="/setting" id="setting">
            <el-menu-item index="3">
              <div style="display: inline-block">

                <label for="setting"><i class="el-icon-setting"></i></label>
                  <span v-if="!isCollapsed">参数设置</span>

              </div>
            </el-menu-item>
             </router-link>
            </el-menu>

      </el-aside>
      <el-main style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background-color: #2B2B2B;padding: 0" >
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import ShowTime from "./components/features_test/ShowTime";
  import Show3DModel from "./components/console/Show3DModel";
  import MessageBox from './components/features_test/LogBoard/MessageBox'
  import {mapActions, mapMutations, mapState} from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      navIndex : '1',
      activeIndex: '1',
      leftMenuButtonIcon: 'el-icon-caret-right',
      asideWidth: '200px',
      isCollapsed: false,
      logoUrl: './img/log0.png'
    }
  },
  components:{
    ShowTime,
    Show3DModel,
    MessageBox,
  },
  mounted() {
    this.initWsAction()
  },
  computed: {
    ...mapState([
      'ws',
      'showLogBoard',
    ])
  },
  methods: {
    ...mapActions([
      'initWsAction',
    ]),
    ...mapMutations([
      'activeShowLogBoard'
    ]),
    show_keep_alive(str){

    },
    handleSelect(key, keyPath){

    },
    handleToggle(){
      this.isCollapsed = !this.isCollapsed
      if (this.isCollapsed){
        this.asideWidth = '65px'
      }else{
        this.asideWidth = '200px'
      }
    }
  }
}
</script>

<style>
a {
  color: #9E9F9F;
  text-decoration: none;
}
.router-link-active {
  color: #B15B2E;
}
body {
  margin: 0;
  padding: 0;
  color:  #9E9F9F;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #9E9F9F;
}
html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }
.tac {
  height: 100vh;
}
.rotate-arrow {
  transition: all 2s;
}
.rotate-arrow-active {
   transform:rotate(-180deg);
   transition: all 2s;
}

</style>
